<template>
    <div class="login-container">
      <div class="login-box">
        <h3>登录</h3>
        <el-form ref="loginForm" @submit.native.prevent="handleLogin">
          <el-form-item>
            <el-input v-model="username" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="password" type="password" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleLogin" :loading="isLoading">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import axios from 'axios';
  import { ElMessage } from 'element-plus';
  import 'element-plus/theme-chalk/el-message.css';
  
  const router = useRouter();
  const route = useRoute();
  
  const username = ref('');
  const password = ref('');
  const isLoading = ref(false);
  
  const handleLogin = async () => {
    try {
      isLoading.value = true;
  
      // 去掉用户名和密码两边的空格
      const trimmedUsername = username.value.trim();
      const trimmedPassword = password.value.trim();
  
      if (!trimmedUsername || !trimmedPassword) {
        ElMessage({
          showClose: true,
          message: '用户名和密码不能为空',
          type: 'error',
        });
        isLoading.value = false;
        return;
      }
  
      const res = await axios.post('https://api.wotai.org/index.php/api/query/login', {
        username: trimmedUsername,
        password: trimmedPassword,
      });
  
      if (res.data.code === 1) {
        document.cookie = `auth_token=${res.data.token};max-age=${7 * 24 * 60 * 60};path=/`;
        ElMessage({
          showClose: true,
          message: '登录成功',
          type: 'success',
        });
        // 重定向到之前尝试访问的页面或首页
        const redirectPath = route.query.redirect || '/';
        router.push(redirectPath);
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message || '用户名或密码错误',
          type: 'error',
        });
      }
    } catch (error) {
      console.error('Error during login:', error);
      ElMessage({
        showClose: true,
        message: '登录失败，请稍后再试',
        type: 'error',
      });
    } finally {
      isLoading.value = false;
      password.value = ''; // 函数结束前将密码设为空
    }
  };
  </script>
  
  <style scoped lang="less">
  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
    h3{
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .el-button{
        width: 100%;
    }
  }
  
  @keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  .login-box {
    width: 400px;
    padding: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  </style>
  